{% extends 'ParentTemplate.html' %}
{% load static %}
{% block content %}
    <div class="container">
        <div class="col-lg-9">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">头像</a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">我的课表 <span class="sr-only">(current)</span></a></li>
                            <li id="btnPortal"><a href="#" class="formAdd">信息门户</a></li>
                            <li><a href="#">考试安排</a></li>
                            <li><a href="#">图书馆</a></li>
                            <li><a href="#">全校课表</a></li>
                            <li><a href="#">电费</a></li>
{# 创建点击事件---然后进行显示#}
                             <li id="btnAdd"><a href="#" class="formAdd">{{ MeInform }}</a></li>
{#                            <li><a href="#">{{ MeInform }}</a></li>#}

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">更多操作<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">空闲教室</a></li>
                                    <li><a href="#">我的成绩</a></li>
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Action</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            {% block content1 %}
            {% endblock %}
        </div>
        {# 这个是右侧的作业任务通知栏#}
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-heading" style="background:#9f0000">
                    <div style="color: white">
                        {{ title }}
                    </div>
                </div>
                <ul class="list-group">
                    {% for obj in queryset|slice:":8" %}
                        <li class="list-group-item list-group-item-info">
                            <div style="font-size: 10px;color: black">
                                <a href="http://www.wsyu.edu.cn/{{ obj.url }}">{{ obj.title }}</a>
                            </div>
                            {#                            以后我可以来根据id来进行颜色的变换，那么这时候显示的时候，颜色就不会那么单一了#}
                            <span class="time small -align-right">{{ obj.date }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {#    展现我的有关信息---弹出框#}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form id="formAdd">
                        <div class="clearfix">
                            <div class="col-lg-6">
                                <div class="form-group" style="position: relative;">
                                    <ul class="list-group">
                                        <li class="list-group-item">{{ MyDatas.name }}</li>
                                        <li class="list-group-item">{{ MyDatas.studentId }}</li>
                                        <li class="list-group-item">{{ MyDatas.graduationSchool }}</li>
                                        <li class="list-group-item">{{ MyDatas.phoneNumber }}</li>
                                        <li class="list-group-item">{{ MyDatas.grade }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">退 出</button>
                    <button id="btnSave" type="button" class="btn btn-primary">确 认</button>
                </div>
            </div>
        </div>
    </div>
    {#信息门户的登录#}
    <div class="modal fade" id="MessagePortal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <form id="formAdd" method="post">
                        <div class="clearfix">
                            {#                            {% csrf_token %}#}
                            <div class="form-group">
                                <label for="exampleInputEmail1">用户名</label>
                                {{ form.username }}
                                <span>{{ form.username.errors.0 }}</span>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">密码</label>
                                {{ form.password }}
                                <span style="color: red">{{ form.password.errors.0 }}</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnSave" type="button" class="btn btn-primary">保 存</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script src="{% static '/js/echarts.min.js' %}"></script>
    <script type="text/javascript">
        var DELETE_ID;
        var EDIT_ID;
        $(function () {
            bindBtnAddEvent();
            bindBtnMessagePortEvent();
            bindBtnSaveEvent();
            doAdd();
        })

        function bindBtnAddEvent() {
            $("#btnAdd").click(function () {
                EDIT_ID = undefined;
                {#$("#formAdd")[0].reset();#}
                $(".modal-title").text("我的信息");
                $('#myModal').modal('show');
            });
        }

        function bindBtnMessagePortEvent() {
            $("#btnPortal").click(function () {
                EDIT_ID = undefined;
                $("#formAdd")[0].reset();
                $(".modal-title").text("信息门户登录");
                $('#MessagePortal').modal('show');
            });
        }

        function bindBtnSaveEvent() {
            $("#btnSave").click(function () {
                $(".errors_msg").empty();
                if (EDIT_ID) {
                    //编辑
                    console("这个是进入编辑页面，我在Ajax中")
                    {#doEdit();#}
                } else {
                    doAdd();
                }

            });
        }

        function doAdd() {
            $.ajax({
                {#url: "Students_view/Homework/",#}
                type: "post",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    if (res.status) {
                        alert("创建成功");
                        location.reload();
                        $("#formAdd")[0].reset();
                        $('#myModal').modal('hide');
                    }
                }
            })
        }
    </script>
{% endblock %}
